<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
  
  var map, iw, marker;
  var autocomplete;
  var ac_names = {
    'street_number': 'Number',
    'route': 'Street',
    'neighborhood': 'Neighborhood',
    'locality': 'City',
    'administrative_area_level_2': 'County',
    'administrative_area_level_1': 'State',
    'country': 'Country',
    'postal_code': 'Zip code'
  };
  
  function initialize() {
    var myLatlng = new google.maps.LatLng(37.783259, -122.402708);
    var myOptions = {
      zoom: 12,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: false,
      zoomControl: false,
      panControl: false
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    google.maps.event.addListener(map, 'tilesloaded', tilesLoaded);
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'));
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      showSelectedPlace();
    });
  }
  
  function tilesLoaded() {
    google.maps.event.clearListeners(map, 'tilesloaded');
    google.maps.event.addListener(map, 'zoom_changed', setAutocompleteBounds);
    google.maps.event.addListener(map, 'bounds_changed', setAutocompleteBounds);
    google.maps.event.addListener(map, 'dragend', setAutocompleteBounds);
    setAutocompleteBounds();
  }
  
  function setAutocompleteBounds() {
    autocomplete.setBounds(map.getBounds());
  }
  
  function setAutocompleteType() {
    var types = document.getElementById('types').value;
    if (types == 'all') {
      autocomplete.setTypes([]);
    } else {
      autocomplete.setTypes([ types ]);
    }
  }

  function setAutocompleteCountry() {
    var country = document.getElementById('country').value;
    if (country == 'all') {
      autocomplete.setComponentRestrictions([]);
    } else {
      autocomplete.setComponentRestrictions({ 'country': country });
    }
  }
  
  function showSelectedPlace() {
    var place = autocomplete.getPlace();
    map.panTo(place.geometry.location);
    
    if (marker != null) {
      marker.setMap(null);
    }
    
    marker = new google.maps.Marker({
      position: place.geometry.location,
      map: map,
      animation: google.maps.Animation.DROP
    });
    iw = new google.maps.InfoWindow({
      content: getIWContent(place)
    });
    iw.open(map, marker);
  }
  
  function showInfoWindow(i) {
    return function(place, status) {
      if (iw) {
        iw.close();
        iw = null;
      }
      
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        iw = new google.maps.InfoWindow({
          content: getIWContent(place)
        });
        iw.open(map, markers[i]);        
      }
    }
  }
  
  function getIWContent(place) {
    var content = "";
    content += '<table>';
    content += '<tr><td style="text-align: right"><img class="placeIcon" src="' + place.icon + '"/></td>';
    content += '<td><b><a href="' + place.url + '">' + place.name + '</a></b></td></tr>';
    for (var j = 0; j < place.address_components.length; j++) {
      var att = place.address_components[j].types[0];
      var val = place.address_components[j].long_name;
      if (ac_names[att]) {
        att = ac_names[att];
      }
      content += '<tr><td class="iw_attribute_name">' + att + ':</td><td>' + val + '</td>';    
    }
    if (place.formatted_phone_number) {
      content += '<tr><td class="iw_attribute_name">Telephone:</td><td>' + place.formatted_phone_number + '</td>';      
    }
    if (place.rating) {
      content += '<tr><td class="iw_attribute_name">Rating:</td><td>' + place.rating + '</td>';
    }
    if (place.website) {
      content += '<tr><td class="iw_attribute_name">Website:</td><td><a href="' + place.website + '">' + place.website + '</a></td>';
    }
    content += '</tr></table>';
    return content;
  }
</script>
<style>
body {
  font-family: sans-serif;
  font-size: 24pt;
  margin: 0;
}
#map_canvas {
  position: absolute;
  width: 1014px;
  height: 478px;
  top: 50px;
  left: 0px;
  border: 1px solid grey;
}
#controls {
  position: absolute;
  top: 0px;
  left: 750px;
  height: 120px;
  padding: 5px;
  font-size: 16pt;
}
.placeIcon {
  width: 32px;
  height: 32px;
  margin: 4px;
}
#results {
  font-size: 20px;
  border-collapse: collapse;
}
#locationField {
  width: 750px;
  height: 25px;
  top: 0px;
  left: 0px;
  position: absolute;
}
#autocomplete {
  width: 750px;
  font-size: 24pt;
}
.iw_attribute_name {
  font-weight: bold;
  text-align: right;
}
#types, #country {
  -webkit-appearance: none;
  font-size: 16pt;
  padding: 4px;
  width: 100px;
}
</style>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="locationField">
    <input id="autocomplete" type="text" />
  </div>
  <div id="controls">
    <form name="controls">
    <select id="types" onChange="setAutocompleteType()">
      <option value="all">All</option>
      <option value="geocode">Addresses</option>
      <option value="establishment">Businesses</option>
      <option value="(cities)">Cities</option>
      <option value="(regions)">Regions</option>
    </select>
    <select id="country" onChange="setAutocompleteCountry()">
      <option value="all">All</option>
      <option value="us">U.S.A.</option>
      <option value="au">Australia</option>
    </select>
    </form>
  </div>
  <div id="map_canvas"></div>
  <div id="listing"><table id="results"></table></div>
</body>
</html>
